import React, { Component } from 'react';
import PropTypes from 'prop-types'

class App extends Component {
  render() {
    return (
      <div>
        <ChildCpn name="why" age={18} height={1.88} names={["abc", "bcd", "bca"]}></ChildCpn>
        <ChildCpn name="kobe" age={40} height={1.98} names={["aaa", "bbb", "ccc"]}></ChildCpn>
        <ChildCpn></ChildCpn>
      </div>
    );
  }
}

function ChildCpn(props) {
  const { name, age, height } = props
  const { names } = props

  return (
    <div>
      <h2>{name + " " + age + " " + height}</h2>
      <div>
        <ul>
          {
            names.map((item, index) => {
              return <li>{item}</li>
            })
          }
        </ul>
      </div>
    </div>
  )
}

ChildCpn.propTypes = {
  name: PropTypes.string.isRequired,
  age: PropTypes.number,
  height: PropTypes.number,
  names: PropTypes.array
}

ChildCpn.defaultProps = {
  name: "默认名称",
  age: 18,
  height: 1.88,
  names: ["aaa", "bbb", "ccc", "ddd"],
}

 
class ChildCpn2 extends Component {
  static propTypes = {

  }

  static defaultProps = {

  }



  render() {
    return (
      <div>
        
      </div>
    )
  }
}


export default App
